<!--<template>-->
<!--  <el-dialog v-bind="$attrs" width="80%" top="5vh" v-on="$listeners" @open="handleOpen">-->
<!--    <div class="controls">-->
<!--      <el-form inline size="small" class="text-center">-->
<!--        <el-form-item label="Date">-->
<!--          <el-date-picker v-model="startDate" value-format="timestamp" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="Device Limit">-->
<!--          <el-select v-model="limitCount">-->
<!--            <el-option :value="1000" :label="1000" />-->
<!--            <el-option :value="2000" :label="2000" />-->
<!--            <el-option :value="3000" :label="3000" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item />-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" size="small" @click="fetchDeviceLocation">-->
<!--            <i class="el-icon-search" />-->
<!--          </el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    <div v-loading="loading" class="map-container">-->
<!--      <div id="map" />-->
<!--    </div>-->
<!--  </el-dialog>-->
<!--</template>-->

<!--<script>-->
<!--import { getLocationInfoFromBatch } from '@/api/geo'-->
<!--import { mapType } from '@/components/common/const'-->

<!--var StaticMode = require('@mapbox/mapbox-gl-draw-static-mode')-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      center: [119.4, 26.08],-->
<!--      map: null,-->
<!--      accessToken: '',-->
<!--      language: 'en',-->
<!--      limitCount: 1000,-->
<!--      devices: [],-->
<!--      startDate: '',-->
<!--      loading: false,-->
<!--      ak: '',-->
<!--      mapType: ''-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    const userInfo = this.$store.getters.userInfo-->
<!--    this.mapType = userInfo.mapType-->
<!--    this.$mapboxgl.accessToken = this.accessToken = userInfo.mapKey-->
<!--  },-->
<!--  methods: {-->
<!--    async fetchDeviceLocation() {-->
<!--      try {-->
<!--        this.devices = await getLocationInfoFromBatch({ startDate: this.startDate, limitCount: this.limitCount })-->
<!--      } catch (error) {-->
<!--        return this.$message.error(error)-->
<!--      }-->
<!--      this.setMarker()-->
<!--    },-->
<!--    setMarker() {-->
<!--      // 所有设备的坐标信息数组-->
<!--      this.devices.forEach(_ => {-->
<!--        if (this.mapType === mapType.MAP_BOX) {-->
<!--          new this.$mapboxgl.Marker()-->
<!--            .setLngLat([_.lng, _.lat])-->
<!--            .addTo(this.map)-->
<!--        } else if (this.mapType === mapType.BAIDU) {-->
<!--          const marker = new this.BMapGL.Marker(-->
<!--            new this.BMapGL.Point(_.lng, _.lat)-->
<!--          )-->
<!--          this.map.addOverlay(marker)-->
<!--        } else if (this.mapType === mapType.GOOGLE) {-->
<!--          new this.google.maps.Marker({-->
<!--            position: { lat: Number(_.lat), lng: Number(_.lng) },-->
<!--            map: this.map,-->
<!--            options: {-->
<!--              draggable: true-->
<!--            }-->
<!--          })-->
<!--          // this.map.panTo({ lat: Number(_.lat), lng: Number(_.lng) })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    initBaiduMap() {-->
<!--      this.map = new this.BMapGL.Map('map')-->
<!--      // 添加比例尺控件-->
<!--      this.map.addControl(-->
<!--        new this.BMapGL.ScaleControl({-->
<!--        })-->
<!--      )-->
<!--      // 添加缩放控件-->
<!--      this.map.addControl(-->
<!--        new this.BMapGL.ZoomControl({-->
<!--        })-->
<!--      )-->
<!--      // 创建点坐标 axios => res 获取的初始化定位坐标-->
<!--      // const point = new this.BMapGL.Point(1, 1)-->
<!--      // 初始化地图，设置中心点坐标和地图级别-->
<!--      this.map.centerAndZoom('福州', 15)-->
<!--      // 开启鼠标滚轮缩放-->
<!--      this.map.enableScrollWheelZoom(true)-->
<!--    },-->
<!--    initGoogleMap() {-->
<!--      this.map = new this.google.maps.Map(document.getElementById('map'), {-->
<!--        zoom: 15,-->
<!--        center: this.center,-->
<!--        // panControl: true,-->
<!--        zoomControl: true,-->
<!--        mapTypeControl: false,-->
<!--        scaleControl: true,-->
<!--        streetViewControl: false,-->
<!--        // overviewMapControl: true,-->
<!--        rotateControl: true-->
<!--      })-->
<!--    },-->
<!--    initMapboxMap() {-->
<!--      this.map = new this.$mapboxgl.Map({-->
<!--        container: 'map',-->
<!--        style: 'mapbox://styles/mapbox/streets-v11',-->
<!--        center: this.center,-->
<!--        zoom: 13-->
<!--      })-->
<!--      // this.marker =-->
<!--      // 设置语言-->
<!--      this.map.addControl(-->
<!--        new this.$mapboxLanguage({-->
<!--          defaultLanguage: this.language-->
<!--        })-->
<!--      )-->

<!--      const myObserver = new ResizeObserver((entries) => {-->
<!--        this.map.resize()-->
<!--      })-->
<!--      myObserver.observe(document.getElementById('map'))-->

<!--      // 比例尺-->
<!--      var scale = new this.$mapboxgl.ScaleControl({-->
<!--        maxWidth: 100,-->
<!--        unit: 'metric'-->
<!--      })-->
<!--      this.map.addControl(scale, 'bottom-left')-->

<!--      // 添加放大、缩小、旋转控件-->
<!--      this.map.addControl(-->
<!--        new this.$mapboxgl.NavigationControl(),-->
<!--        'bottom-right'-->
<!--      )-->

<!--      this.map.addControl(-->
<!--        new this.$mapboxgl.FullscreenControl({-->
<!--          container: document.getElementById('map')-->
<!--        }),-->
<!--        'top-right'-->
<!--      )-->

<!--      this.draw = new this.$MapboxDraw({-->
<!--        displayControlsDefault: false,-->
<!--        modes: Object.assign(-->
<!--          {-->
<!--            static_mode: StaticMode-->
<!--          },-->
<!--          this.$MapboxDraw.modes-->
<!--        ),-->
<!--        defaultModes: 'static_mode'-->
<!--      })-->

<!--      this.map.addControl(this.draw)-->
<!--    },-->
<!--    async handleOpen() {-->
<!--      this.$nextTick(() => {-->
<!--        if (this.mapType === mapType.MAP_BOX) {-->
<!--          this.initMapboxMap()-->
<!--        } else if (this.mapType === mapType.BAIDU) {-->
<!--          import('@/views/geo/bmap-loader').then(({ loadBaiDuMap }) => {-->
<!--            loadBaiDuMap().then((BMapGL) => {-->
<!--              this.BMapGL = BMapGL-->
<!--              this.initBaiduMap()-->
<!--            })-->
<!--          })-->
<!--        } else if (this.mapType === mapType.GOOGLE) {-->
<!--          import('@/views/geo/gmaps-loader.js').then(async(module) => {-->
<!--            const gmapsInit = module.default-->
<!--            this.google = await gmapsInit()-->
<!--            this.initGoogleMap()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--  .map-container {-->
<!--    height: 600px;-->
<!--  }-->
<!--  #map {-->
<!--    position: absolute;-->
<!--    top: 100px;-->
<!--    bottom: 0px;-->
<!--    width: 100%;-->
<!--    right: 0px;-->
<!--    left: 0px;-->
<!--    z-index: 1;-->
<!--  }-->

<!--</style>-->
